<template>
    <div class="msj_vipdetail">
        <!-- 会员详情 -->
            <li>
                <p>用户</p>
                <div style="display:flex; align-items: center;">
                    <div class="msj_vipdetail_author">
                        <img :src="vipdetail.user.author" alt="">
                    </div>
                    <span>{{ vipdetail.user.username }}</span>
                </div>
            </li>
            <li>
                <p>ID</p>
                <div style="color: rgba(7, 144, 245, 1)">
                    {{ vipdetail.userId }}
                </div>
            </li>
            <li>
                <p>会员等级</p>
                <div>
                    {{ vipdetail.vips }}
                </div>
            </li>
            <li>
                <p>标签组</p>
                <div>
                    <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
                </div>
            </li>
            <li>
                <p>真实姓名</p>
                <div>
                    {{ vipdetail.myname }}
                </div>
            </li>
            <li>
                <p>微信号</p>
                <div>
                    {{ vipdetail.wxnums }}
                </div>
            </li>
            <li>
                <p>性别</p>
                <div>
                    {{ vipdetail.grader }}
                </div>
            </li>
          <div style="width: 400px; display:flex; justify-content: center;">
            <el-button type="primary" @click="goback">返回列表</el-button>
          </div>  
    </div>
</template>

<script>
import {getmsjvipfenzu} from '../../../utils/api'
export default {
    name: 'PhaemacyVlistdetail',

    data() {
        return {
            vipdetail:{},
            options: [],
        value: ''
        };
    },

    mounted() {
        
        this.vipdetail=this.$route.params.detail
       this.value=this.vipdetail.lvtag
       getmsjvipfenzu().then(res=>{
            this.options=res.data.data.map(v=>({value:v.bqian,label:v.bqian}))
       })
    },

    methods: {
        // 返回列表 
        goback(){
            this.$router.go(-1)
        }
    },
};
</script>

<style  scoped>
*{
    margin: 0;
}
    .msj_vipdetail{
        width: 100%;
    }
    .msj_vipdetail li{
        display: flex; margin: 10px 0;font-size: 14px;
        align-items: center;
    }
    .msj_vipdetail li p{
        
        font-weight: 700; margin-right: 20px;
        width: 200px; text-align: right;
    }
    .msj_vipdetail_author{
        width: 50px; height: 50px;
        margin-right: 10px;
    display: flex; justify-content: center;
    align-items: center; background: #BCBCBC;
    }
    .msj_vipdetail_author img{
        width: 40px;
height: 40px;
border-radius: 50%;
    }
</style>